<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <div id="myDiv">
		        <h1>{{message}}</h1>
		        <input type="text" name="name" v-model="message"/>
		    </div>
		
		    <script src="./js/vue.js"></script>
		    <script type="text/javascript">
		        const app = new Vue({
		            el: "#myDiv",
		            data: {
		                message: '奥利给'
		            },
					 methods: {
					                handler(e){
					                    this.message = e.target.value;
					                }
					            }
		        });
		    </script>
			
			<div id="myDiv">
			        <h1>{{sex}}</h1>
			        男：<input type="radio" name="sex" v-model="sex" value='MAN'/><br/>
			        女：<input type="radio" name="sex" v-model="sex" value='WOMAN'/><br/>
			    </div>
			
			    <script src="./js/vue.js"></script>
			    <script type="text/javascript">
			        const app = new Vue({
			            el: "#myDiv",
			            data: {
			                sex: 'MAN'
			            }
			        });
			    </script>
				
				
				<div id="myDiv">
					<input type="checkbox" v-model="isChecked" />同意本网站新协议<br/>
					<button :disabled="!isChecked">登录</button>
					<br>
					是否选中了:{{isChecked}}
				</div>
				<script src="./js/vue.js"></script>
				<script>
					let vm=new Vue({
						el:"#myDiv",
						data:{
							isChecked:false
						}
					});
				</script> -->
				
				<!-- <div id="myDiv">
				        <input type="checkbox" name="hobby" value="学习" v-model="hobbies"/>学习
				        <input type="checkbox" name="hobby" value="唱歌" v-model="hobbies"/>唱歌
				        <input type="checkbox" name="hobby" value="跳舞" v-model="hobbies"/>跳舞
				        <ul>
				            <li v-for="item in hobbies">{{item}}</li>
				        </ul>
				    </div>
					<script src="./js/vue.js"></script>
					    <script type="text/javascript">
					        const app = new Vue({
					            el: "#myDiv",
					            data: {
					                hobbies: []
					            }
					        });
					    </script> -->
						
						<!-- <div id="myDiv">
						        选择城市:
						        <select name="city" v-model="city" multiple>
						            <option value="请选择">请选择</option>
						            <option value="杭州">杭州</option>
						            <option value="西安">西安</option>
						            <option value="林州">林州</option>
						            <option value="大理">大理</option>
						        </select> <br/> <br/> <br/>
						        选择的城市: {{city}}
						    </div>
						    <script src="./js/vue.js"></script>
						    <script>
						        let vm = new Vue({
						            el: "#myDiv",
						            data: {
						                city: ['林州','大理']
						            }
						        });
						    </script> -->
							
							<!-- <div id="myDiv">
							        <input type="text" v-model="num1"/>
							        <select v-model="operation">
							            <option value="+">+</option>
							            <option value="-">-</option>
							            <option value="*">*</option>
							            <option value="/">/</option>
							        </select>
							        <input type="text" v-model="num2">
							
							        <input type="button" value="=" @click="calc">
							
							        <input type="text" v-model="result"/>
							
							    </div>
								<script src="./js/vue.js"></script>
								<script type="text/javascript">
								const app = new Vue({
								            el: "#myDiv",
								            data: {
								                num1: 0,
								                num2: 0,
								                operation: '+',
								                result: 0
								            },
											methods: {
											                // 实现计算
											                calc(){
											                    switch (this.operation) {
											                        case "+":
											                            this.result = parseInt(this.num1) + parseInt(this.num2);
											                            break;
											                        case "-":
											                            this.result = parseInt(this.num1) - parseInt(this.num2);
											                            break;
											                        case "*":
											                            this.result = parseInt(this.num1) * parseInt(this.num2);
											                            break;
											                        case "/":
											                            this.result = parseInt(this.num1) / parseInt(this.num2);
											                            break;
											                    }
											                }
											            }
											        });
											    </script> -->
												
												
												<!-- <style>
												    .content{
												        font-size: 20px;
												        color: red;
												    }
												</style>
												<body>
												    <div id="myDiv">
												        <p v-bind:class="content">{{message}}</p>
												    </div>
												
												    <script src="./js/vue.js"></script>
												    <script type="text/javascript">
												        const app = new Vue({
												            el: "#myDiv",
												            data: {
												                message: "马小跳",
												                content: "content"
												            }
												        });
												    </script> -->
												<!-- <div id="myDiv">
												        <p>{{name}}</p>
												    </div>
												
												    <script src="./js/vue.js"></script>
												    <script type="text/javascript">
												        const app = new Vue({
												            el: "#myDiv",
												            data: {
												                firstName: "峰",
												                lastName: "桑"
												            },
												            computed: {
												                name(){
												                    return this.firstName + " " + this.lastName;
												                }
												            }
												        });
												    </script> -->
													
													
													
													
													
													
													
													
													
													
													
													
										<!-- <div id="myDiv">
										        {{birthday | dateFormat }}
										    </div>
										    <script src="./js/vue.js"></script>
										    <script src="./js/moment.js"></script>		
										    <script type="text/javascript">
										
										      	
										        Vue.filter("dateFormat",function(value){
										            return moment(value).format("YYYY-MM-DD HH:mm:ss");
										        });
										
										        const app = new Vue({
										            el: "#myDiv",
										            data: {
										                birthday: new Date()
										            }
										        });
										    </script> -->
							<!-- <div id="myDiv">
							        {{message | messageFormat}} <br/>
							        {{message }}					
							    </div>
							    <script src="./js/vue.js"></script>
							    <script type="text/javascript">
							
							        Vue.filter("messageFormat",function(value){
							            return value.replace("很棒","优秀");
							        });
							
							        const app = new Vue({
							            el: "#myDiv",
							            data: {
							                message: "马,是一个很棒的青年"
							            }
							        });
							    </script> -->
								
								<!-- <div id="myDiv">
								        {{birthday | dateFormat }}     <br/>		
								        {{birthday | dateFormat("YYYY-MM-DD") }}	
								    </div>
								    <script src="./js/vue.js"></script>
								    <script src="./js/moment.js"></script>
								    <script type="text/javascript">
								
								        Vue.filter("dateFormat",function(value,pattern = "YYYY-MM-DD HH:mm:ss"){
								            return moment(value).format(pattern);
								        });
								
								        const app = new Vue({
								            el: "#myDiv",
								            data: {
								                birthday: new Date()
								            }
								        });
								    </script> -->
									
						 <!-- <div id="myDiv">
						        用户名：<input type="text" v-foucs v-color="color">
						    </div>
						    <script src="./js/vue.js"></script>
						    <script type="text/javascript">
						
						        Vue.directive("foucs",{
						            inserted: function(el) { 
						                el.focus()
						            }
						        });
								 Vue.directive("color",{
								            bind: function(el,binding) {			
								                el.style.color = binding.value;
								            }
								        });
						        const app = new Vue({
						            el: "#myDiv",
						            data: {
										color:'blue'
						            }
						        });
						    </script> -->
							<!-- 
							 <div id="myDiv">
							        用户名：<input type="text" v-color="'green'">
							    </div>
							    <script src="./js/vue.js"></script>
							    <script type="text/javascript">
							        const app = new Vue({
							            el: "#myDiv",
							            data: {
							            },
							            directives: {
							               color: {
							                   bind: function(el,binding) {
							                       el.style.backgroundColor = binding.value;
							                   }
							               }
							            }
							        });
							    </script> -->
								
								 <!-- <div id="myDiv">
								         <table border="1">
								             <tr>
								                 <td>图书编号</td>
								                 <td>图书名称</td>
								                 <td>出版日期</td>
								                 <td>价格</td>
								                 <td>购买数量</td>
								                 <td>操作</td>
								             </tr>
								             <tr v-for="book in books">
								                 <td>{{book.id}}</td>
								                 <td>{{book.name}}</td>
								                 <td>{{book.pubDate}}</td>
								                 <td>{{book.price}}</td>
								                 <td>
								                     <button @click="decrement(book)" v-bind:disabled="book.number < 2">
								                       -
								                   	</button>
								                     {{book.number}}
								                     <button @click="increment(book)">+</button>
								                 </td>
								                 <td>
								                     <button>删除</button>
								                 </td>
								             </tr>
								         </table>
								     </div>
								     <script src="./js/vue.js"></script>
								     <script type="text/javascript">
								         const app = new Vue({
								             el: "#myDiv",
								             data: {
								                 books: [
								                     {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
								                     {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
								                     {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
								                     {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
								                 ]
								             },
								             methods: {
								                 decrement(book){
								                     book.number--;
								                 },
								                 increment(book){
								                     book.number++;
								                 }
								             }
								         });
								     </script> -->
									 
									 
									 <!-- 
									  -->
									  
									  
									   <!-- <div id="myDiv">
									          <table border="1">
									              <tr>
									                  <td>图书编号</td>
									                  <td>图书名称</td>
									                  <td>出版日期</td>
									                  <td>价格</td>
									                  <td>购买数量</td>
									                  <td>操作</td>
									              </tr>
									              <tr v-for="(book,index) in books">
									                  <td>{{book.id}}</td>
									                  <td>{{book.name}}</td>
									                  <td>{{book.pubDate}}</td>
									                  <td>{{book.price}}</td>
									                  <td>
									                      <button @click="decrement(book)" v-bind:disabled="book.number < 2">-</button>
									                      {{book.number}}
									                      <button @click="increment(book)">+</button>
									                  </td>
									                  <td>
									                      <button @click="deleteHandle(index)">删除</button>
									                  </td>
									              </tr>
									          </table>
									          <h1>总价：{{totalPrice | getPrice}}</h1>
									          <h2 v-if="books.length <= 0">
									              购物车空空如也
									          </h2>
									      </div>
									      <script src="./js/vue.js"></script>
									      <script type="text/javascript">
									          const app = new Vue({
									              el: "#myDiv",
									              data: {
									                  books: [
									                      {id: 1, name: '天龙八部', pubDate:'1988-02' ,price: 80.01, number: 1},
									                      {id: 2, name: '射雕英雄传', pubDate:'2000-09', price: 20.00, number: 1},
									                      {id: 3, name: '倚天屠龙记', pubDate:'1986-12', price: 60.00, number: 1},
									                      {id: 4, name: '鹿鼎记', pubDate:'2001-05', price: 70.00, number: 1}
									                  ]
									              },
											
												  
															  filters: {
															                  getPrice(price){
															                      return '￥' + price.toFixed(2);
															                  },
																			  getName(name){
																				  return 'Ran'+name;
																			  }
															 },
															
												   methods: {
													                  deleteHandle(index){
													                      this.books.splice(index,1);
													                  
													              },
												                  decrement(book){
												                      book.number--;
												                  },
												                  increment(book){
												                      book.number++;
												                  }
												              },
									              computed: {
									                  totalPrice(){
									                      return this.books.reduce((sum,book)=>{
									                          return sum  + book.price*book.number;
									                      },0)
									                  }
									              }
												  
												  
									          });
									      
										  
										 
											  
									
	</body>
</html>
